<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计数器</title>
</head>

<body>
    <!-- 要挂载的节点 -->
    <div id="root"></div>
    <!-- 引入依赖 -->
    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.js"></script>
    <!-- 设置类型为text/babel 否则浏览器无法解析jsx -->
    <script type="text/babel">
        // 获取根节点
        const root = ReactDOM.createRoot(document.querySelector("#root"))

        // App组件
        class App extends React.Component {
            constructor() {
                super()
                this.state = {
                    num: 100
                }
                this.increment = this.increment.bind(this)
                this.decrement = this.decrement.bind(this)
            }

            render() {
                return (
                    <div>
                        <h2>计数器：{this.state.num}</h2>
                        <button onClick={this.decrement}>-1</button>
                        <button onClick={this.increment}>+1</button>
                    </div>
                )
            }
            increment() {
                this.setState({ num: this.state.num + 1 })
            }
            decrement() {
                this.setState({ num: this.state.num - 1 })
            }

        }




        root.render(<App />)

    </script>
</body>

</html>